<template>
	<view class="navigate_top_bar">
		<!-- 第一大类 -->
		<view class="first_category">
			<view :class="[{'active':first_category_index==index}, 'first_category_item']" @click="change_first_category(index)"
				v-for="(item, index) in first_category" :key="index">{{item}}</view>
		</view>
		<!-- 第二大类 -->
		<view class="second_category">
			
			<view class="lost_box" v-if="first_category_index==0" @click="toggle_check_box">
				<text>{{second_category_value}}</text>
				<uni-icons type="bottom" size="36" color="#014DA1"></uni-icons>
			</view>
			<view class="found_other" v-else><text>其他物品</text></view>
			
		</view>
		
		<!-- 下拉框 -->
		<view class="whole_choose_box" v-show="flag">
			<view class="mask"></view>
			<view class="choose_box">
				<van-picker show-toolbar="true" title="类型" :columns="second_category"
					@change="choose_second_category" @confirm="select_confirm" @cancel="select_cancel" />
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		name: "navigateTopBar",
		options: {
			styleIsolation: 'shared',
		},
		data() {
			return {
				// 第一大类
				first_category: ['我捡到了东西', '我弄丢了东西'],
				// 第二大类的数据选择
				second_category: ["校园卡", "身份证", "电影卡", "银行卡", "其他物品"],
				// 暂选的第二类的索引值
				temp_index:0,
				// 暂选的第二类的值
				temp_value:'校园卡',
				// 是否点击了下拉框
				flag: false,
				// 旧值，用于下拉框取消按钮功能
				old_index: 0,
				old_value: '校园卡'
			};
		},
		computed:{
			// 映射状态管理的state
			...mapState({
				// 当前第一大类的选择状态
				first_category_index:state=>state.first_category_index,
				// 当前第二大类的选择状态
				second_category_index:state=>state.second_category_index,
				// 第二大类的值
				second_category_value:state=>state.second_category_value,
			})
		},
		methods: {
			// 映射状态管理的mutations
			...mapMutations(['edit_first_index', 'edit_second_index', 'edit_second_value']),
			// 弹出选择框
			toggle_check_box(){
				this.flag = !this.flag
				// 将改变前的索引值和值保存下来
				this.old_index = this.second_category_index
				this.old_value = this.second_category_value
			},
			// 下拉框选择确定
			select_confirm(){
				this.flag = !this.flag
				this.edit_second_index(this.temp_index)
				this.edit_second_value(this.temp_value)
				this.old_index = this.temp_index
				this.old_value = this.temp_value
			},
			// 下拉框选择取消
			select_cancel(){
				this.flag = !this.flag
				uni.showToast({
					title:'取消成功',
					icon:"success"
				})
			},
			
			// 选择第二大类
			choose_second_category(e) {
				this.temp_value = e.detail.value
				this.temp_index = e.detail.index
			},

			// 切换第一大类
			change_first_category(index1) {
				this.edit_first_index(index1)
				
				// 如果选择弄丢了东西，就让第二大类的索引等于5
				if (this.first_category_index == 1) {
					this.edit_second_index(5)
				}else{
					this.edit_second_index(this.old_index)
					this.edit_second_value(this.old_value)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		background-color: #014DA1 !important;
		color: white !important;
	}

	.navigate_top_bar {
		width: 700rpx;
		height: 204rpx;
		background-color: white;
		border-radius: 26rpx;
		box-sizing: border-box;
		padding: 20rpx;
		box-shadow: 0 0 8px #b8b8b8;
		display: flex;
		flex-direction: column;
		align-items: center;

		.first_category {
			width: 600rpx;
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.first_category_item {
				width: 270rpx;
				height: 52rpx;
				border-radius: 100rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #014DA1;
				background-color: #edf1fd;
				text-align: center;
				line-height: 52rpx;
			}
		}

		.second_category {
			margin-top: 20rpx;

			.found_other,
			.lost_box {
				position: relative;
				width: 590rpx;
				height: 78rpx;
				border-radius: 20rpx;
				border: 2rpx solid #014da1;
				color: #014DA1;
				font-size: 32rpx;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: center;

				/deep/ .uniui-bottom {
					color: #014DA1 !important;
					font-size: 32rpx !important;
					position: absolute;
					right: 10rpx;
					top: 24rpx;
				}
			}
		}

		.whole_choose_box {
			position: absolute;
			top: 0;
			left: 0;

			.mask {
				width: 100vw;
				height: 100vh;
				background-color: black;
				opacity: 0.5;
				position: fixed;
				z-index: 99;
			}

			.choose_box {
				width: 100vw;
				position: fixed;
				bottom: 0;
				z-index: 100;

				// 整个picker
				/deep/ .van-picker {
					border-radius: 20rpx 20rpx 0 0;
				}

				// 标题类型
				/deep/ .van-picker__title {
					font-size: 36rpx;
				}

				// 确定按钮
				/deep/ .van-picker__confirm {
					font-size: 32rpx;
					color: #014DA1;
				}

				// 取消按钮
				/deep/ .van-picker__cancel {
					font-size: 32rpx;
				}

				// 选中的文字颜色
				/deep/ .van-picker-column__item--selected {
					color: #014DA1;
				}
			}
		}

	}
</style>
